<template>
  <div style="margin: 8px;">
    <div style="text-align: center; margin-bottom: 20px;">
      {{ shipmentNo }}
    </div>
    <div>
      <div style="display: inline-block; width: 75px; height: 75px; vertical-align: top; margin-left: 3px; margin-right: 24px; margin-bottom: 8px;" v-loading="imgLoading">
        <el-upload
          class="avatar-uploader"
          accept="image/jpg,image/jpeg,image/png"
          :action="uploadUrl"
          :show-file-list="false"
          :on-success="handleAvatarSuccess(id)"
          :before-upload="beforeAvatarUpload"
          :headers="uploadHeader"
          :disabled="uploadIng"
        >
          <div class="avatar-uploader-icon">
            <i class="el-icon-loading" v-if="uploadIng"></i>
            <i class="el-icon-plus" v-else></i>
          </div>
          <div class="avatar-text" v-if="uploadIng">上传中...</div>
          <div class="avatar-text" v-else>{{$t('shipment.上传')}}</div>
        </el-upload>
      </div>

      <div v-for="(item, index) in imgArr" :key="index" style="display: inline-block;">
        <el-image
          class="zoomable-image"
          style="width: 75px; height: 75px; margin-left: 3px; margin-right: 3px; margin-bottom: 8px;"
          :src="item"
          :preview-src-list="imgArr"
        ></el-image>
        <span class="close-icon" @click="removeImage(index)">x</span>
      </div>
    </div>

    <span style="color: red; font-size: 12px;">如遇权限的询问，请允许当前网页的权限请求</span>

    <div style="position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%);">
      <el-button size="large" type="primary" style="width: 380px;" @click="uploadImg()" :loading="loading">
        上传
      </el-button>
      <div>
        <span style="color: red; font-size: 12px;">如遇权限的询请等待图片上传完毕再关闭当前页面，否则会上传失败</span>
      </div>
    </div>

  </div>
</template>

<script>
import {getShipmentInfo, saveShipmentImg} from "@/api/shipment";
import {getToken} from "@/utils/auth";
export default {
  name: "uploadShipmentInfo",
  data(){
    return {
      uploadIng: false,
      uploadUrl: process.env.VUE_APP_BASE_API + '/uploadShipmentImage',
      uploadHeader: {
        Authorization: 'Bearer ' + getToken(),
      },
      imgLoading: false,
      id: '',
      shipmentNo: '',
      imgArr: [],
      loading: false,
    }
  },
  created() {
    this.id = this.$route.query.id
    this.getData()
  },
  methods:{
    getData(){
      getShipmentInfo(this.id)
        .then(res=>{
          this.shipmentNo = res.data.shipmentNo
          if (res.data.imageArr !== null) {
            this.imgArr = Object.values(res.data.imageArr);
          }
        })
    },

    // 图片上传
    handleAvatarSuccess(data) {
      return (res, file, fileList) => {
        this.imgLoading = false
        this.imgArr.push(res.info.imageUrl);

      }
    },

    beforeAvatarUpload(file) {
      this.imgLoading = true
      if (this.imgArr.length >= 9) {
        this.$message.error(this.$t('shipment.上传的图片不得超过9张'));
        return false
      }
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt1M = file.size / 1024 / 1024 < 10;

      // this.uploadIng = true
      if (!isJPG) {
        // this.uploadIng = false
        this.$message.error(this.$t('shipment.上传的图片格式需为jpeg/png'));
      }
      if (!isLt1M) {
        // this.uploadIng = false
        this.$message.error(this.$t('shipment.上传的图片不得超过10M'));
      }
      return isJPG && isLt1M;
    },

    removeImage(index) {
      this.imgArr.splice(index, 1);
    },

    uploadImg() {
      this.loading = true
      const postData = {
        id: this.id,
        imageUrl: this.imgArr,
        type: 'allAdd',
      };
      saveShipmentImg(postData)
        .then(res=>{
          if(res.error === 0){
            this.$successMessage(res.message)
          } else {
            this.$errorMessage(res.message)
          }
          this.loading = false
        })
    },
  }
}
</script>

<style scoped lang="scss">
.wrap {
  padding: 30px 30px;
  .header{
    //display: flex;
    //justify-content: space-between;
  }
  .content{
    padding: 20px 0 0;
  }
  .header-card{
    font-size: 14px;
    background-color: rgba(242, 242, 242, 1);
    p{
      margin: 10px 0;
      padding: 0;
    }
    .font-bold{
      font-weight: bold;
    }
    .true-number{
      color: #FF0000;
      font-weight: 600;
    }
  }
}
.goods-table{
  width: 1500px;
  .goods-title{
    font-size: 14px;
  }
  .goods-attr{
    font-size: 13px;
    color: #7F7F7F;
  }
}
.table-tips{

}
</style>
<style scoped lang="scss">
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 15px;
  color: rgba(0, 0, 0, 0.42745098039215684);
  width: 75px;
  height: 75px;
  line-height: 75px;
  text-align: center;
  border: 2px dashed rgba(0, 0, 0, 0.42745098039215684);
  opacity: 0.7;
}
.avatar {
  width: 138px;
  height: 138px;
  display: block;
}
.union-pay-title {
  font-weight: 900;
  font-size: 14px;
}
.copy-title {
  color: #0099FF;
  cursor: pointer;
}
.avatar-text {
  font-size: 14px;
  text-align: center;
  margin-top: -2px;
  color: #333;
  position: relative;
  top: -24px;
  color: rgba(0, 0, 0, 0.42745098039215684);
}
.close-icon {
  position: relative;
  top: -75px;
  left: -15px;
  font-size: 15px;
  cursor: pointer;
  color: white;
  border: 1px solid rgba(245, 108, 108, 1);
  background-color: rgba(245, 108, 108, 1);
  border-radius: 10px;
  width: 22px;
  height: 21px;
  text-align: center;
  transition: transform 0.3s;
  padding-left: 5px;
  padding-right: 5px;
  display: inline-block;
}
</style>
